<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>服务核销 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .service-card {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
    }
    
    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--primary);
    }
    
    .qr-container {
      position: relative;
      padding: 20px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .qr-code {
      width: 200px;
      height: 200px;
      background-image: url('https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=SERVICE_CODE_123456789');
      background-size: cover;
      margin: 0 auto;
    }
    
    .qr-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.9);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    @keyframes countdown {
      from {
        stroke-dashoffset: 0;
      }
      to {
        stroke-dashoffset: 283; /* 2 * PI * r = 2 * 3.14 * 45 = ~283 */
      }
    }
    
    .countdown-circle {
      stroke-dasharray: 283;
      stroke-dashoffset: 0;
      transform-origin: center;
      animation: countdown 60s linear forwards;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="service_benefits.html" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">服务核销</h1>
      <a href="#" class="text-sm text-gray-500" id="helpBtn">帮助</a>
    </div>
    
    <!-- 服务卡片 -->
    <div class="p-4">
      <div class="service-card bg-white mb-4">
        <div class="p-4">
          <div class="flex items-center justify-between mb-2">
            <div class="flex items-center">
              <i class="fas fa-home-alt primary-color text-lg mr-2"></i>
              <h3 class="font-medium">家政保洁服务</h3>
            </div>
            <span class="text-xs primary-color px-2 py-0.5 bg-primary-light rounded">未使用</span>
          </div>
          
          <div class="text-sm text-gray-500 mb-3">
            <p>服务内容：全屋深度清洁，3小时服务</p>
            <p>有效期至：2024-06-30</p>
            <p>服务编号：SP24052100123</p>
          </div>
          
          <div class="flex justify-between items-center">
            <div class="text-xs text-gray-500">
              <span>会员等级赠送</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 核销二维码 -->
      <div class="text-center mb-4">
        <h2 class="text-base font-medium mb-4">请服务人员扫码核销</h2>
        
        <div class="qr-container mb-4" id="qrContainer">
          <div class="qr-code"></div>
          
          <div class="mt-4 text-center">
            <p class="text-sm text-gray-500 mb-1">二维码有效时间</p>
            <div class="flex items-center justify-center">
              <svg width="20" height="20" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="45" fill="none" stroke="#f0f0f0" stroke-width="10" />
                <circle cx="50" cy="50" r="45" fill="none" stroke="#ff7e2d" stroke-width="10" class="countdown-circle" transform="rotate(-90 50 50)" />
              </svg>
              <span class="text-lg primary-color font-bold ml-2" id="countdown">60</span>
              <span class="text-sm text-gray-500">秒</span>
            </div>
          </div>
          
          <!-- 过期遮罩 -->
          <div class="qr-overlay hidden" id="qrOverlay">
            <i class="fas fa-exclamation-circle text-gray-400 text-4xl mb-2"></i>
            <p class="text-gray-500 mb-3">二维码已过期</p>
            <button class="btn-primary px-6 py-2 rounded-full" id="refreshBtn">
              <i class="fas fa-sync-alt mr-1"></i> 刷新
            </button>
          </div>
        </div>
        
        <p class="text-sm text-gray-500">请在服务人员到达后出示此二维码</p>
      </div>
      
      <!-- 服务信息 -->
      <div class="bg-white rounded-lg p-4 mb-4">
        <h3 class="font-medium mb-3">服务信息</h3>
        
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-500">服务类型</span>
            <span>家政保洁服务</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">服务时长</span>
            <span>3小时</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">服务地址</span>
            <span>广州市天河区天河路123号</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">预约时间</span>
            <span>2023-10-25 14:00-17:00</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">联系电话</span>
            <span>138****6789</span>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="flex space-x-3">
        <button class="flex-1 btn-outline py-2 rounded-lg flex items-center justify-center">
          <i class="fas fa-calendar-alt mr-1"></i> 更改预约
        </button>
        <button class="flex-1 btn-outline py-2 rounded-lg flex items-center justify-center">
          <i class="fas fa-phone-alt mr-1"></i> 联系客服
        </button>
      </div>
    </div>
    
    <!-- 核销成功弹窗 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-20" id="successModal">
      <div class="bg-white rounded-lg w-80 overflow-hidden">
        <div class="p-6 flex flex-col items-center">
          <div class="w-16 h-16 rounded-full bg-primary-light flex items-center justify-center mb-4">
            <i class="fas fa-check-circle text-3xl primary-color"></i>
          </div>
          <h3 class="text-lg font-medium mb-2">核销成功</h3>
          <p class="text-sm text-gray-500 text-center mb-4">服务已成功核销，感谢您的使用</p>
          <button class="btn-primary w-full py-3 rounded-lg" onclick="window.location.href='service_benefits.html'">返回服务列表</button>
        </div>
      </div>
    </div>
    
    <!-- 帮助弹窗 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-20" id="helpModal">
      <div class="bg-white rounded-lg w-80 overflow-hidden">
        <div class="p-4 border-b border-gray-100 flex justify-between items-center">
          <h3 class="font-medium">核销帮助</h3>
          <button id="closeHelpBtn">
            <i class="fas fa-times text-gray-400"></i>
          </button>
        </div>
        <div class="p-4">
          <div class="space-y-3 text-sm text-gray-600">
            <p>1. 请在服务人员到达后，出示此页面的二维码</p>
            <p>2. 服务人员将使用专用设备扫描二维码进行核销</p>
            <p>3. 核销成功后，系统将自动记录服务完成</p>
            <p>4. 二维码有效期为60秒，过期后可点击刷新按钮重新获取</p>
            <p>5. 如遇到核销问题，请联系客服：400-888-8888</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 倒计时功能
      let countdown = 60;
      const countdownElement = document.getElementById('countdown');
      const qrOverlay = document.getElementById('qrOverlay');
      
      const timer = setInterval(() => {
        countdown--;
        countdownElement.textContent = countdown;
        
        if (countdown <= 0) {
          clearInterval(timer);
          qrOverlay.classList.remove('hidden');
        }
      }, 1000);
      
      // 刷新按钮
      const refreshBtn = document.getElementById('refreshBtn');
      refreshBtn.addEventListener('click', function() {
        countdown = 60;
        countdownElement.textContent = countdown;
        qrOverlay.classList.add('hidden');
        
        // 重置动画
        const countdownCircle = document.querySelector('.countdown-circle');
        countdownCircle.style.animation = 'none';
        void countdownCircle.offsetWidth; // 触发重绘
        countdownCircle.style.animation = 'countdown 60s linear forwards';
        
        // 重新开始倒计时
        clearInterval(timer);
        const newTimer = setInterval(() => {
          countdown--;
          countdownElement.textContent = countdown;
          
          if (countdown <= 0) {
            clearInterval(newTimer);
            qrOverlay.classList.remove('hidden');
          }
        }, 1000);
      });
      
      // 帮助弹窗
      const helpBtn = document.getElementById('helpBtn');
      const helpModal = document.getElementById('helpModal');
      const closeHelpBtn = document.getElementById('closeHelpBtn');
      
      helpBtn.addEventListener('click', function(e) {
        e.preventDefault();
        helpModal.classList.remove('hidden');
        helpModal.classList.add('flex');
      });
      
      closeHelpBtn.addEventListener('click', function() {
        helpModal.classList.add('hidden');
        helpModal.classList.remove('flex');
      });
      
      // 测试核销成功
      const qrCode = document.querySelector('.qr-code');
      const successModal = document.getElementById('successModal');
      
      qrCode.addEventListener('click', function() {
        successModal.classList.remove('hidden');
        successModal.classList.add('flex');
      });
      
      // 点击模态框背景关闭
      document.querySelectorAll('.fixed.inset-0.bg-black.bg-opacity-50').forEach(modal => {
        modal.addEventListener('click', function(e) {
          if (e.target === this) {
            this.classList.add('hidden');
            this.classList.remove('flex');
          }
        });
      });
    });
  </script>
</body>
</html> 